<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 <link href="static/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="static/css/bootstrap-table.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="static/css/base.css" />
    <link rel="stylesheet" href="static/css/info-mgt.css" />
    <style>
        .layui-layer-title{background:url(images/righttitlebig.png) repeat-x;font-weight:bold;color:#46647e; border:1px solid #c1d3de;height: 33px;line-height: 33px;}
        .tabe_bot label{width: 70px;text-align: right;font-size: 14px;font-weight: 900;color: #46647e}
        .l_left{float: left}
        .tabe_bot input,.tabe_bot  select{width: 170px;height: 30px;border-radius: 6px;margin:0 20px 0 0;border: none;border: 1px #ccc solid}
        .tabe_btn{width: 60px;height: 30px;background-color: #68b86c;border: none;border-radius: 6px;color: #fff}
    </style>
    <title>职员明细表</title>
</head>


<body>
	
	<div class="query">
    	<div class="tabe_bot">
        	<div class="l_left"><label>部门：</label><select id="oz_name">
        	<c:forEach var="dm" items="${department}">
        		<option>${dm.oz_department }</option>
        	</c:forEach>
        	</select ></div>
			<div class="l_left"><label>员工姓名：</label><input type="text" id="pf_name"></div>
			<div class="l_left"><label>档案状态：   </label>
			<select id="files">
				<c:forEach var="fd" items="${filestatus }">
				<option value="${fd.id }">${fd.files }</option>
			</c:forEach>
			</select>
			</div>
			<div class="l_left"><label>建档时间：</label><input id="demo01" type="text" class="createtime"></div>
        	<button class="tabe_btn " type="submit" onclick="One()">查询</button>
        	<div class="clear"></div>
    	</div>
	</div>
	
	<div class="table-box">
    	<table id="table" class="table_style"></table>
	</div>
	<div class="pagination ue-clear"></div>
</body>

<script type="text/javascript" src="static/js/jquery.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/bootstrap-table.js"></script>
<script src="static/js/bootstrap-table-zh-CN.min.js"></script>
<script src="static/js/date/js/laydate.js"></script>
<script type="text/javascript"></script>
<script>
    !function(){
        laydate.skin('molv');//切换皮肤，请查看skins下面皮肤库
        laydate({elem: '#demo'});//绑定元素
        laydate({elem: '#demo01'});//绑定元素
    }();
</script>

<script>
	function One() {
			var oz_name,pf_name,files,createtime;
			oz_name = $("#oz_name").val();
			pf_name = $("#pf_name").val();
			files = $("#files").find("option:selected").text();
			createtime = $(".createtime").val();
	    $.ajax({
	        type: "GET",
	        url: "as_list.json",
	        dataType: "json",
	        data:{
	        	"oz_name":oz_name,
	        	"pf_name":pf_name,
	        	"files":files,
	        	"createtime":createtime
	        },
	        success : function(result) {
				if (result.data) {
					var TableData = result.data;
					$('#table').bootstrapTable("load", TableData);
				}
			}
	    })
	}
</script>
<script>
    $(function () {
        $('#table').bootstrapTable({
            method: "get",
            striped: true,
            singleSelect: false,
            url: "as_list.json", 
            dataType: "json",
            pagination: true, //分页
            pageSize: 10,
            pageNumber: 1,
            search: false, //显示搜索框
            contentType: "application/x-www-form-urlencoded",
            queryParams: null,
            columns: [
                {
                    checkbox:"true",
                    field: 'ID',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: "部门",
                    field: 'oz_name',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '档案编号',
                    field: 'record_number',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '员工姓名',
                    field: 'pf_name',
                    align: 'center'
                },
                {
                    title: '性别',
                    field: 'sex',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '职位',
                    field: 'position_name',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    title: '电话',
                    field: 'pf_phone',
                    align: 'center'
                },
                {
                    title: '档案状态',
                    field: 'files',
                    align: 'center'
                },
                {
                    title: '建档日期',
                    field: 'createtime',
                    align: 'center'
                }
            ]
        });
    });
</script>
</html>